<template>
  <!-- 头部 -->
  <div class="header">
    <h1 class="title">大数据可视化展板</h1>
    <h3 class="timer">{{ content }}</h3>
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, ref } from 'vue'

const content = ref('2024年05月05日16时45分50秒')

const handleTimer = () => {
  const timer = new Date()
  const year = timer.getFullYear()
  const month = timer.getMonth() + 1 + ''
  const date = timer.getDate() + ''
  const hours = timer.getHours() + ''
  const minutes = timer.getMinutes() + ''
  const secends = timer.getSeconds() + ''

  content.value = `${year}年${month.padStart(2, '0')}月${date.padStart(2, '0')}日${hours.padStart(2, '0')}时${minutes.padStart(2, '0')}分${secends.padStart(2, '0')}秒`
}

handleTimer()
const timer = setInterval(handleTimer, 1000)
onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.header {
  height: 90px;
  background-image: url(../../assets/head_bg.png);
  // background-size: 100% 100%;
  position: relative;
  .title {
    color: white;
    text-align: center;
    line-height: 90px;
  }

  .timer {
    color: white;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
